<template>
  <el-card class="form-container" shadow="never">
    <el-form
      :model="menu"
      :rules="rules"
      ref="menuFrom"
      label-width="150px">
      <el-form-item label="业务类别：" prop="deptTypeName">
        <el-input v-model="menu.deptTypeName" placeholder="请输入" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="分类名称：" prop="typeName">
        <el-input v-model="menu.typeName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="上级分类：" prop="parentId">
        <el-select
          v-model="menu.parentId"
          placeholder="请选择分类"
          @change="change"
          :disabled="parentId===0"
        >
          <el-option
            v-for="item in selectMenuList"
            :key="item.id"
            :label="item.typeName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="parentId===0" label="分类图标：" prop="lvIcon">
        <single-upload v-model="menu.lvIcon"></single-upload>
      </el-form-item>
      <el-form-item v-if="parentId!==0" label="列表图标：" prop="listIcon">
        <single-upload v-model="menu.listIcon"></single-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('menuFrom')">提交</el-button>
        <!--<el-button v-if="!isEdit" @click="resetForm('menuFrom')">重置</el-button>-->
        <el-button @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import SingleUpload from '@/components/Upload/singleUpload'
import { curCourseTypeList, curCourseTypeSave, curCourseTypeUpdate, curCourseTypeGetById } from '@/api/course'

const defaultMenu = {
  deptTypeName: '社区教育',
  deptType: 1
}
export default {
  name: 'MenuDetail',
  components: { SingleUpload },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      parentId: 0,
      menu: Object.assign({}, defaultMenu),
      selectMenuList: [],
      rules: {
        deptTypeName: [
          { required: true, message: '请输入业务类别', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择上级分类', trigger: 'blur' }
        ],
        typeName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.parentId = parseInt(this.$route.query.parentId) || 0
    if (this.id === 0) {
      this.rules.lvIcon = [
        { required: true, message: '请选择分类图标', trigger: 'blur' }
      ]
      this.rules.listIcon = [
        { required: true, message: '请选择列表图标', trigger: 'blur' }
      ]
    }

    if (this.isEdit) {
      curCourseTypeGetById({ id: this.$route.query.id }).then(response => {
        this.menu = Object.assign(response.data, defaultMenu)
      })
    } else {
      this.menu = Object.assign({}, defaultMenu)
      this.menu.parentId = this.parentId
    }
    this.getSelectMenuList()
  },
  methods: {
    getSelectMenuList () {
      curCourseTypeList({ pageSize: 100, pageNum: 1 }).then(response => {
        this.selectMenuList = response.data.list
        if (this.parentId === 0) {
          this.selectMenuList.unshift({ id: 0, typeName: '无上级分类' })
        }
      })
    },
    onSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否提交数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.parentId === 0) {
              this.menu.listIcon = ''
            }
            if (this.parentId !== 0) {
              this.menu.lvIcon = ''
            }
            if (this.isEdit) {
              curCourseTypeUpdate({ id: this.$route.query.id, ...this.menu }).then(response => {
                this.$message({
                  message: '修改成功',
                  type: 'success',
                  duration: 1000
                })
                this.$router.back()
              })
            } else {
              curCourseTypeSave(this.menu).then(response => {
                this.$refs[formName].resetFields()
                this.resetForm(formName)
                this.$message({
                  message: '提交成功',
                  type: 'success',
                  duration: 1000
                })
                this.$router.back()
              })
            }
          })
        } else {
          this.$message({
            message: '验证失败',
            type: 'error',
            duration: 1000
          })
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.menu = Object.assign({}, defaultMenu)
      this.getSelectMenuList()
    },
    change (e) {
      this.parentId = e
    },
    back () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>

</style>
